<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import LoginByUsername from "@/views/login/components/login-by-username.vue";
import LoginByCode from "@/views/login/components/login-by-code.vue";

export default defineComponent({
  name: 'login',
  components: {LoginByCode, LoginByUsername},

  setup() {

    const data = reactive({
      loginWay: 0,
    })

    const methods = {
      handLoginWay() {
        if (++data.loginWay > 1) {
          data.loginWay = 0
        }
      }
    }

    const validators = {}


    const rules = reactive({})

    const refs = {}


    return {
      ...toRefs(data),
      ...methods,
      validators,
      rules,
      ...refs
    }
  }
})
</script>

<template>
  <div class="container">

    <div class="login">
      <img style="width: 100px;height: 100px;position: absolute;right: 0;top: 0"
             src="/images/login/切换登录.png" alt="图片丢失了" @click="handLoginWay"/>
      <login-by-username v-if="loginWay==0"></login-by-username>
      <login-by-code v-if="loginWay==1"></login-by-code>
    </div>


  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background: url("/images/login/back.jpg") no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login {
    box-shadow: 2px 2px 4px 0 rgba(51, 25, 25, 0.5);
    position: relative;
    width: 400px;
    height: 300px
  }
}
</style>